<template>
    <div id="classNumberList">
        <Row style="margin-bottom: 10px; text-align: right">
            <DatePicker
                :editable="false"
                type="daterange"
                :value="timeRange"
                :options="dateOptions"
                placement="bottom-end"
                placeholder="Select date"
                style="width: 300px"
                transfer
                @on-change="changeDate"
            ></DatePicker>
        </Row>
        <Card
            v-if="listCalendarEvents.length == 0"
            style="text-align: center; font-size: 12px; color: #aaa"
            ><span>暂无课程安排</span></Card
        >
        <Collapse simple v-if="listCalendarEvents.length > 0" accordion>
            <Panel :name="event.title" v-for="event in listCalendarEvents" :key="event.dateStr">
                <span style="font-size: 14px; font-weight: bold">{{ event.dateStr }}</span>
                <div slot="content">
                    <Card
                        style="
                            font-size: 13px;
                            margin-bottom: 6px;
                            margin-left: 10px;
                            width: 30%;
                            display: inline-block;
                        "
                        v-for="(classNumber, index) in event.courseList"
                        :key="classNumber.classNumberId"
                    >
                        <p slot="title">
                            <a @click="toDetailPage(classNumber)">{{ classNumber.courseName }}</a>
                        </p>
                        <h4>
                            {{ classNumber.start.split(' ')[1] }} -
                            {{ classNumber.end.split(' ')[1] }}
                        </h4>
                    </Card>
                </div>
            </Panel>
        </Collapse>
    </div>
</template>

<script>
import { queryTeachSchedule } from '@/api/selfStudy/class.js';
import classCommonFun from './classCommonFunMixin.js';
export default {
    name: 'classCourseList',
    props: ['classInfo'],
    mixins: [classCommonFun],
    data() {
        return {
            curPanel: '',
            calendarEvents: [],
            listCalendarEvents: [],
            classNumbers: [],
            timeRange: [],
            monthDay: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
            dateOptions: {
                shortcuts: [
                    {
                        text: '1周',
                        value() {
                            const end = new Date();
                            const start = new Date();
                            end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
                            return [start, end];
                        },
                    },
                    {
                        text: '1个月',
                        value() {
                            const end = new Date();
                            const start = new Date();
                            end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
                            return [start, end];
                        },
                    },
                    {
                        text: '3个月',
                        value() {
                            const end = new Date();
                            const start = new Date();
                            end.setTime(start.getTime() + 3600 * 1000 * 24 * 90);
                            return [start, end];
                        },
                    },
                ],
            },
        };
    },
    mounted() {
        let oDate = new Date();
        let year = oDate.getFullYear();
        if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
            this.monthDay = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        } else {
            this.monthDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        }
        this.calendarEvents = [];
        this.queryTeachSchedule();
    },
    computed: {},
    filters: {},
    methods: {
        changeDate(date) {
            this.timeRange = date;
            this.queryTeachSchedule();
        },
        queryTeachSchedule() {
            let params = {};
            if (this.classInfo) {
                params = {
                    classId: this.classInfo.id,
                };
            }
            if (this.timeRange.length > 0 && this.timeRange[0]) {
                params.startTime = this.timeRange[0] + ' 00:00:00';
                params.endTime = this.timeRange[1] + ' 23:59:59';
            } else {
                let year = new Date().getFullYear();
                let month = new Date().getMonth() + 1;
                params.startTime = new Date().getFullYear() + '-' + month + '-1 00:00:00';
                params.endTime =
                    new Date().getFullYear() +
                    '-' +
                    month +
                    '-' +
                    this.monthDay[month - 1] +
                    ' 23:59:59';
                this.timeRange = [params.startTime, params.endTime];
            }
            queryTeachSchedule(params).then((data) => {
                if (data.code == 1) {
                    let classNumbers = this.dealClassNumberList(data.attribute.data);
                    let listCalendarEvents = {};
                    if (classNumbers.length) {
                        classNumbers.forEach((item) => {
                            if (!listCalendarEvents[item.dateStr]) {
                                listCalendarEvents[item.dateStr] = {
                                    courseList: [item],
                                    dateStr: item.dateStr,
                                };
                            } else {
                                listCalendarEvents[item.dateStr].courseList.push(item);
                            }
                            this.listCalendarEvents = Object.values(listCalendarEvents);
                        });
                    } else {
                        this.listCalendarEvents = [];
                    }
                } else {
                    this.listCalendarEvents = [];
                    this.$Message.warning(data.message);
                }
            });
        },
        toDetailPage(item) {
            this.$router.push({
                name: 'courseScheduleDetail',
                query: {
                    courseId: item.courseId,
                    date: item.dateStr,
					classId:item.classId
                },
                params: {
                    row: item,
                    courseId: item.courseId,
                    date: item.dateStr,
                    classInfo: this.classInfo,
                },
            });
        },
    },
};
</script>

<style></style>
